<template>
  <el-row>
    <el-col :span="24">
      <RemarkForm v-model="reason"
                  :placeholder="placeholder" />
    </el-col>
    <el-col :span="24">
      <div class="footer">
        <el-button type="default"
                   @click="handleCancel">取消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   @click="handleSubmit">确定</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios'
// import _ from 'lodash'
export default {
  name: "ReasonSubmit",
  props: {
    data: Object,
    method: {
      type: String,
      default () {
        return "PUT"
      }
    },
    url: String,
    placeholder: {
      type: String,
      default () {
        return "请输入原因";
      }
    },
    field: {
      type: String,
      default () {
        return "reason"
      }
    }
  },
  data () {
    return {
      loading: false,
      reason: null,
      disabled: false,
    }
  },
  created () {
    // this.reason = this.value
  },
  methods: {
    handleSubmit () {
      if (!this.reason) {
        return this.$message({ type: 'error', message: this.placeholder })
      }
      this.loading = true;
      this.submit();
    },

    async submit () {
      await this.batchRefuse()
    },
    async batchRefuse () {
      try {
        const reason = {
          ...this.data
        }
        reason[this.field] = this.reason;
        const response = await axios({
          method: this.method,
          url: this.url,
          data: reason,
        })
        if (response?.code === 0) {
          this.loading = false
          this.$emit("confirm");
          this.$message({ type: "success", message: "操作成功" });
        } else {
          this.loading = false
          this.$message({ type: "error", message: response?.message });
        }
      } catch {
        this.loading = false;
      }
    },
    handleCancel () {
      this.reason = null;
      this.$emit("cancel");
    }
  }
}
</script>